<template>
	<view class="changePwd">
		<view class="changePwdForm">
			<up-form :rules="rules" :model="store.form" errorType="message" ref="changePwdFormRef" >
				<up-form-item
						prop="oldPassword"
						borderBottom="true"
						ref="item1"
						label-width="0px"
				>
					<up-input
							v-model="store.form.oldPassword"
							border="none"
							placeholder="请输入旧密码"
							type="password"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="newPassword"
						borderBottom="true"
						ref="item2"
						label-width="0px"
				>
					<up-input
							v-model="store.form.newPassword"
							border="none"
							placeholder="请输入新密码"
							type="password"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="confirmPassword"
						borderBottom="true"
						ref="item3"
						label-width="0px"
				>
					<up-input
							v-model="store.form.confirmPassword"
							border="none"
							placeholder="请重新输入新密码"
							type="password"
							clearable
					></up-input>
				</up-form-item>
			</up-form>
			<up-button class="pwd_submit" type="primary" text="提交" color='#000033' @click="submit()"></up-button>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
import useChangePwdStore from '../../store/changePwd';

const store=useChangePwdStore();
const changePwdFormRef = ref(null);

const submit=()=>{
  changePwdFormRef.value.validate().then(valid => {  
	if (valid) {  
		store.changePwd()
	} else {  
	  uni.$u.toast('输入格式有误')
	}  
  }).catch(() => {  
});  
}

const rules=reactive({
	oldPassword:{
		type: 'string',
		required: true,
		message: '旧密码不能为空',
		trigger: ['change']
	},
	newPassword:{
		type: 'string',
		required: true,
		message: '新密码不能为空',
		trigger: ['change']
	},
	confirmPassword:[
	{
		type: 'string',
		required: true,
		message: '请重新输入新密码',
		trigger: ['change']
	},
	{
		validator:(rule, value, callback)=>{
			if(value===store.form.newPassword){
				return true
			}else{
				return false
			}},
		message:'2次输入的密码不一致',
		trigger: ['blur', 'change']
	}],

})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.changePwd{
	display: flex;
	width: 750rpx;
	height: 100%;
	margin: 0 auto;
	background-color: #F7F7F7;
	box-sizing: border-box;
}
.changePwdForm{
	width:650rpx;
	height: 400rpx;
	background-color: white;
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 50rpx;
	border-radius: 20rpx;
	padding: 10rpx 50rpx 50rpx 50rpx;
}
.pwd_submit{
	margin-top: 30rpx;
}
</style>
